<template>
<div>
    <h1 class="title">用户分析</h1>
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户活跃度分析" name="userActivity">
        <el-card>
        <el-form :inline="true" :model="activityQuery">
            <el-form-item label="选择分析类型" style="width: 280px;">
                <el-select v-model="activityQuery.type" placeholder="请选择">
                    <el-option label="每周点餐频率" value="weekly"></el-option>
                    <el-option label="每月点餐频率" value="monthly"></el-option>
                    <el-option label="不同时间段的活跃度" value="timePeriod"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择年份" style="width: 200px;">
                <el-select v-model="activityQuery.query_year" placeholder="请选择年份">
                    <el-option v-for="year in years" :key="year" :label="year" :value="year"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="fetchActivityData">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="activityData" style="width: 100%">
            <el-table-column prop="period" label="时间段"></el-table-column>
            <el-table-column prop="order_count" label="订单数量" sortable></el-table-column>
        </el-table>
        </el-card>
    </el-tab-pane>
    <el-tab-pane label="用户群体特征分析" name="userCharacteristics">
        <el-card>
        <el-form :inline="true" :model="characteristicsQuery">
            <el-form-item label="选择分析类型" style="width: 280px;">
                <el-select v-model="characteristicsQuery.type" placeholder="请选择" @change="handleCharacteristicsTypeChange">
                    <el-option label="商户用餐次数" value="merchant"></el-option>
                    <el-option label="评价数量" value="reviewCount"></el-option>
                    <el-option label="评分分数" value="rating"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="characteristicsQuery.type === 'merchant'">
                <el-select v-model="characteristicsQuery.merchant" placeholder="请选择商户" style="width: 120px;">
                    <el-option v-for="merchant in merchants" :key="merchant.value" :label="merchant.label" :value="merchant.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="fetchCharacteristicsData">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="characteristicsData" style="width: 100%" v-loading="loading">
            <el-table-column
              prop="role"
              label="角色"
              :filters="roleFilters"
              :filter-method="filterHandler"
              column-key="role"
              filter-placement="bottom-end"
            ></el-table-column>
            <el-table-column
              prop="gender"
              label="性别"
              :filters="genderFilters"
              :filter-method="filterHandler"
              column-key="gender"
              filter-placement="bottom-end"
            ></el-table-column>
            <el-table-column
              prop="age_group"
              label="年龄组"
              :filters="ageGroupFilters"
              :filter-method="filterHandler"
              column-key="age_group"
              filter-placement="bottom-end"
            ></el-table-column>
            <el-table-column prop="item" label="分析项"></el-table-column>
            <el-table-column prop="count" label="数量"></el-table-column>
        </el-table>
        </el-card>
    </el-tab-pane>
    </el-tabs>
</div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import axios from '@/axios'; 

const activeName = ref('userActivity');

const activityQuery = ref({
    type: '',
    query_year: '', 
});

const activityData = ref([
]); 

const characteristicsQuery = ref({
    type: '',
    merchant: '未设置', // 默认值为不重要
    query_year: '', 
});

const characteristicsData = ref([
   
]);

const merchants = ref([]); 
const years = ref([2019,2020,2021,2022, 2023, 2024]); // 示例年份数据，可以根据需要调整

const loading = ref(false); // 是否正在加载数据

/* 获取用户活跃度数据 */
const fetchActivityData = async () => {
    try {
        const response = await axios.post(`/api/admin/userActivity`, activityQuery.value);
        activityData.value = response.data;
        ElMessage.success('用户活跃度数据查询成功');
        console.log(activityData.value);
    } catch (error) {
        ElMessage.error('查询用户活跃度数据失败');
    }
};

/* 获取用户群体特征数据 */
const fetchCharacteristicsData = async () => {
    try {
        const response = await axios.post('/api/admin/userCharacteristics', characteristicsQuery.value);
        characteristicsData.value = response.data;
        console.log(characteristicsData.value);
        ElMessage.success('用户群体特征数据查询成功');
    } catch (error) {
        ElMessage.error('查询用户群体特征数据失败');
    }
};

/* 获取商家列表 */
const fetchMerchantList = async () => {
    try {
        const response = await axios.get('/api/admin/GetMerchantList'); 
        merchants.value = response.data.map(merchant => ({  // 将商家数据转换为下拉框选项
            value: merchant.merchant_ID,
            label: merchant.merchant_name,
        }));
    } catch (error) {
        console.error('Error fetching merchant list:', error);
    }
};

/* 如果选择了商户用餐次数，则获取商户列表 */
const handleCharacteristicsTypeChange = (value) => { 
    if (value === 'merchant') {  
        fetchMerchantList();
    }
};

const roleFilters = [
  { text: '学生', value: '学生' },
  { text: '教职工', value: '教职工' },
];

const genderFilters = [
  { text: '男', value: '男' },
  { text: '女', value: '女' },
];

const ageGroupFilters = [
    { text: '0-18', value: '0-18' },
    { text: '19-25', value: '19-25' },
    { text: '26-35', value: '26-35' },
    { text: '36-45', value: '36-45' },
    { text: '46-60', value: '46-60' },
    { text: '60+', value: '60+' },
];

const filterHandler = (value, row, column) => {
  const property = column['property'];
  return row[property] === value;
};
</script>

<style scoped>
.title {
    font-size: 20px;
    color: #2c3e50;
    text-align: center;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.el-tabs {
margin-top: 20px;
}
.el-card {
padding: 20px;
}
</style>
    